<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_terrainAspectCalculation"></title>
    <style>
       #toolbar {
          position: absolute;
          top: 50px;
          right: 10px;
          text-align: center;
          z-index: 100;
          border-radius: 4px;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="toolbar" class="panel panel-primary">
  <div class='panel-heading'>
      <h5 class='panel-title text-center' data-i18n="resources.text_terrainAspectCalculation"></h5></div>
  <div class='panel-body content'>
      <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_terrainAspectCalculation"
              onclick="terrainAspectCalculationProcess()"/>&nbsp;
      <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_clearLayer"
              onclick="removeTheme()"/>
  </div>
</div>
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
<script type="text/javascript">
    var map, options, terrainAspectCalculationResult, themeLayer,
        baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-jingjin/rest/maps/京津地区地图",
        serviceUrl = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
    var extent = [104.07, 30.54, 119.51, 42.31];
    new ol.supermap.MapService(baseUrl).getMapInfo(function (serviceResult) {
        var mapJSONObj = serviceResult.result;
        map = new ol.Map({
            target: 'map',
            // ol v7版本用法为ol.control.defaults.defaults； v6版本以下用法为ol.control.defaults
            controls: ol.control.defaults.defaults({attributionOptions: {collapsed: false}})
                .extend([new ol.supermap.control.Logo()]),
            view: new ol.View({
                center: [116.85, 39.79],
                zoom: 8,
                projection: "EPSG:4326",
                multiWorld: true
            })
        });
        options = ol.source.TileSuperMapRest.optionsFromMapJSON(baseUrl, mapJSONObj);
        var layer = new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest(options)
        });
        map.addLayer(layer);
    });

    function terrainAspectCalculationProcess() {
        removeTheme();
        var terrainAspectCalculationParameters = new ol.supermap.TerrainAspectCalculationParameters({
            dataset: "JingjinTerrain@Jingjin",
            terrainAnalystSetting: new ol.supermap.terrainAnalystSetting({
              boundsType: ol.supermap.BoundsType.UNION,
              cellSizeType: ol.supermap.CellSizeType.MAX
            }), 
            resultDatasetName:"testAspect", 
            deleteExistResultDataset:true
        }
        );
        new ol.supermap.SpatialAnalystService(serviceUrl).terrainAspectCalculate(terrainAspectCalculationParameters).then(function (serviceResult) {
            terrainAspectCalculationResult = serviceResult.result;
            //用栅格专题图展示分析结果
            showAnalysisResult_ThemeGridRange();
        });

        //构造栅格专题图
        function showAnalysisResult_ThemeGridRange() {
            var themeGridRangeIteme = new ol.supermap.ThemeGridRangeItem({
                    start: -1,
                    end: 0,
                    color: new ol.supermap.ServerColor(60,164,3)
                });
                themeGridRangeIteme0 = new ol.supermap.ThemeGridRangeItem({
                    start: 0,
                    end: 22.5,
                    color: new ol.supermap.ServerColor(91,188,11)
                    });
                themeGridRangeIteme1 = new ol.supermap.ThemeGridRangeItem({
                    start: 22.5,
                    end: 67.5,
                    color: new ol.supermap.ServerColor(135,211,0)
                }),
                themeGridRangeIteme2 = new ol.supermap.ThemeGridRangeItem({
                    start: 67.5,
                    end: 112.5,
                    color: new ol.supermap.ServerColor(193,230,5)
                }),
                themeGridRangeIteme3 = new ol.supermap.ThemeGridRangeItem({
                    start: 112.5,
                    end: 157.5,
                    color: new ol.supermap.ServerColor(254,255,0)
                }),
                themeGridRangeIteme4 = new ol.supermap.ThemeGridRangeItem({
                    start: 157.5,
                    end: 202.5,
                    color: new ol.supermap.ServerColor(255,190,0)
                }),
                themeGridRangeIteme5 = new ol.supermap.ThemeGridRangeItem({
                    start: 202.5,
                    end: 247.5,
                    color: new ol.supermap.ServerColor(255,127,0)
                });
                themeGridRangeIteme6 = new ol.supermap.ThemeGridRangeItem({
                    start: 247.5,
                    end: 292.5,
                    color: new ol.supermap.ServerColor(255,63,2)
                });
                themeGridRangeIteme7 = new ol.supermap.ThemeGridRangeItem({
                    start: 292.5,
                    end: 337.5,
                    color: new ol.supermap.ServerColor(240,9,0)
                });
                themeGridRangeIteme8 = new ol.supermap.ThemeGridRangeItem({
                    start: 337.5,
                    end: 360,
                    color: new ol.supermap.ServerColor(91,188,11)
                });


            var themeGridRange = new ol.supermap.ThemeGridRange({
                reverseColor: false,
                rangeMode: ol.supermap.RangeMode.EQUALINTERVAL,
                //栅格分段专题图子项数组
                items: [
                    themeGridRangeIteme,
                    themeGridRangeIteme0,
                    themeGridRangeIteme1,
                    themeGridRangeIteme2,
                    themeGridRangeIteme3,
                    themeGridRangeIteme4,
                    themeGridRangeIteme5,
                    themeGridRangeIteme6,
                    themeGridRangeIteme7,
                    themeGridRangeIteme8
                ]
            });

            var themeParameters = new ol.supermap.ThemeParameters({
                //制作专题图的数据集（坡向计算的结果数据集）
                datasetNames: [terrainAspectCalculationResult.dataset.split('@')[0]],
                dataSourceNames: ["Jingjin"],
                joinItems: null,
                themes: [themeGridRange]
            });

            new ol.supermap.ThemeService(baseUrl).getThemeInfo(themeParameters).then(function (serviceResult) {
                var result = serviceResult.result;
                if (result && result.newResourceID) {
                  themeLayer = new ol.layer.Tile({
                        source: new ol.source.TileSuperMapRest({
                            url: baseUrl,
                            noWrap: true,
                            cacheEnabled: false,
                            transparent: true,
                            layersID: result.newResourceID,
                            tileGrid: new ol.tilegrid.TileGrid({
                                extent: extent,
                                resolutions: options.tileGrid.getResolutions()
                            }),
                            transparent: true
                        })
                    });
                }
                map.addLayer(themeLayer);
            });
          }

    }

    //移除专题图
    function removeTheme() {
      if (map.getLayers().getLength() > 1) {
          map.removeLayer(themeLayer);
      }
    }
</script>
</body>
</html>